<html lang="zh-CN"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>记账APP原型</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
  /* 全局样式 */
  body {
    background-color: #f7fafc;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  
  .multi-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 35px;
    padding: 35px;
    width: fit-content;
  }
  
  /* APP容器样式 */
  .app-container {
    width: 375px;
    height: 812px;
    background-color: white;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border: 1px solid #e2e8f0;
  }
  
  /* 固定区域样式 */
  .fixed-section {
    flex-shrink: 0;
    background-color: white;
    z-index: 10;
  }
  
  /* 标题栏 */
  .header-bar {
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #e2e8f0;
  }
  
  /* 内容区域 */
  .content-flex {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 16px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .content-flex::-webkit-scrollbar {
    display: none;
  }
  
  /* 底部导航 */
  .tab-bar {
    height: 80px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #e2e8f0;
  }
  
  .tab-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50px;
    text-align: center;
    font-size: 12px;
    color: #718096;
    transition: color 0.2s;
  }
  
  .tab-item.active {
    color: #2563eb;
  }
  
  .tab-icon {
    font-size: 24px;
    margin-bottom: 4px;
  }
  
  /* 图表容器 */
  .chart-container {
    width: 100%;
    height: 260px;
    margin-top: -4px;
  }
  
  /* 列表样式 */
  .list-item {
    display: flex;
    align-items: center;
    padding: 16px 12px;
    border-bottom: 1px solid #edf2f7;
  }
  
  .list-content {
    flex: 1;
    margin-left: 16px;
    min-width: 0;
  }
  
  /* 数量气泡 */
  .badge {
    display: inline-block;
    background-color: #e53e3e;
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
  }
</style>
</head>
<body>
<div class="multi-container">
  <!-- 账单页面 -->
  <div class="app-container">
    <div class="fixed-section header-bar">
      <h1 style="font-weight:600; font-size:18px">我的开销账单</h1>
      <iconify-icon icon="ic:round-notifications" style="font-size:24px;"></iconify-icon>
    </div>
    
    <div class="content-flex">
      <!-- 月度消费概览 -->
      <div class="rounded-xl bg-blue-50 p-4 mb-4">
        <div class="flex justify-between items-center">
          <div>
            <p class="text-sm text-gray-500">本月消费</p>
            <p class="text-2xl font-bold mt-1">¥3,846</p>
          </div>
          <div class="text-right">
            <p class="text-sm text-gray-500">本月预算</p>
            <p class="text-2xl font-bold mt-1">¥4,500</p>
          </div>
        </div>
        <div class="relative h-2 bg-blue-100 rounded-full overflow-hidden mt-4">
          <div class="absolute top-0 left-0 h-full bg-blue-600 w-3/4"></div>
        </div>
      </div>
      
      <!-- 消费类别图表 -->
      <h2 class="text-lg font-medium mb-3 flex items-center">
        消费分布
        <span class="ml-2 text-sm text-gray-500">(本月)</span>
      </h2>
      <div class="chart-container" id="chart1"></div>
      
      <!-- 最近交易列表 -->
      <h2 class="text-lg font-medium mb-3">最近交易</h2>
      <div class="bg-white rounded-xl overflow-hidden border border-gray-100">
        <div class="list-item">
          <div style="width:48px;height:48px;border-radius:12px;background-color:#feefde;display:flex;align-items:center;justify-content:center;">
            <iconify-icon icon="tdesign:takeaway" style="font-size:24px;color:#f59e0b"></iconify-icon>
          </div>
          <div class="list-content">
            <div class="flex justify-between">
              <span class="font-medium">外卖午餐</span>
              <span class="text-red-500 font-medium">¥36.00</span>
            </div>
            <div class="text-sm text-gray-500 mt-1 flex justify-between">
              <span>美团外卖</span>
              <span>今天 12:34</span>
            </div>
          </div>
        </div>
        
        <div class="list-item">
          <div style="width:48px;height:48px;border-radius:12px;background-color:#e7e1f9;display:flex;align-items:center;justify-content:center;">
            <iconify-icon icon="material-symbols:headphones" style="font-size:24px;color:#8b5cf6"></iconify-icon>
          </div>
          <div class="list-content">
            <div class="flex justify-between">
              <span class="font-medium">音乐会员</span>
              <span class="text-red-500 font-medium">¥15.00</span>
            </div>
            <div class="text-sm text-gray-500 mt-1 flex justify-between">
              <span>网易云音乐</span>
              <span>昨天</span>
            </div>
          </div>
        </div>
        
        <div class="list-item">
          <div style="width:48px;height:48px;border-radius:12px;background-color:#d1f7ea;display:flex;align-items:center;justify-content:center;">
            <iconify-icon icon="ph:basket-bold" style="font-size:24px;color:#10b981"></iconify-icon>
          </div>
          <div class="list-content">
            <div class="flex justify-between">
              <span class="font-medium">超市购物</span>
              <span class="text-red-500 font-medium">¥112.80</span>
            </div>
            <div class="text-sm text-gray-500 mt-1 flex justify-between">
              <span>沃尔玛</span>
              <span>2023/12/13</span>
            </div>
          </div>
        </div>
        
        <div class="list-item">
          <div style="width:48px;height:48px;border-radius:12px;background-color:#ffe2e5;display:flex;align-items:center;justify-content:center;">
            <iconify-icon icon="ic:baseline-local-gas-station" style="font-size:24px;color:#f43f5e"></iconify-icon>
          </div>
          <div class="list-content">
            <div class="flex justify-between">
              <span class="font-medium">加油</span>
              <span class="text-red-500 font-medium">¥300.00</span>
            </div>
            <div class="text-sm text-gray-500 mt-1 flex justify-between">
              <span>中石化</span>
              <span>2023/12/11</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="fixed-section tab-bar">
      <div class="tab-item active">
        <iconify-icon class="tab-icon" icon="mingcute:bill-fill" style="color:#2563eb"></iconify-icon>
        <span>账单</span>
      </div>
      <div class="tab-item">
        <iconify-icon class="tab-icon" icon="ion:checkmark-done-outline"></iconify-icon>
        <span>待办</span>
      </div>
      <div class="tab-item">
        <iconify-icon class="tab-icon" icon="mingcute:calendar-event-line"></iconify-icon>
        <span>纪念日</span>
      </div>
    </div>
  </div>
  
  <!-- TODO页面 -->
  <div class="app-container">
    <div class="fixed-section header-bar">
      <h1 style="font-weight:600; font-size:18px">我的待办事项</h1>
      <div class="flex">
        <iconify-icon icon="mi:filter" style="font-size:24px;margin-right:16px"></iconify-icon>
        <iconify-icon icon="ic:round-notifications" style="font-size:24px;"></iconify-icon>
      </div>
    </div>
    
    <div class="content-flex">
      <!-- 添加新任务 -->
      <div class="flex items-center rounded-lg border-2 border-dashed border-gray-200 p-2 mb-6">
        <div class="flex-1 mr-3">
          <input class="w-full bg-gray-50 rounded-lg py-3 px-4" placeholder="添加新任务..." value="完成APP原型设计">
        </div>
        <button class="w-12 h-12 flex items-center justify-center bg-blue-500 text-white rounded-full">
          <iconify-icon icon="ic:baseline-add" style="font-size:24px;"></iconify-icon>
        </button>
      </div>
      
      <!-- 待办分组 -->
      <div>
        <div class="flex items-start mb-3">
          <h2 class="text-lg font-medium flex-1">今日计划 <span class="badge" style="margin-left:8px">3</span></h2>
          <span class="text-sm text-blue-500 font-medium">查看全部</span>
        </div>
        
        <!-- 任务列表 -->
        <div class="bg-white rounded-xl overflow-hidden border border-gray-100">
          <div class="list-item">
            <iconify-icon icon="radix-icons:circle" style="font-size:24px;"></iconify-icon>
            <div class="list-content">
              <div class="flex justify-between items-start">
                <span class="font-medium">与团队讨论项目方案</span>
                <span class="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded-full">14:00</span>
              </div>
              <p class="text-sm text-gray-500 mt-1">办公室二楼会议室</p>
            </div>
          </div>
          
          <div class="list-item">
            <iconify-icon icon="radix-icons:circle" style="font-size:24px;"></iconify-icon>
            <div class="list-content">
              <div class="flex justify-between items-start">
                <span class="font-medium">发送季度报告邮件</span>
                <span class="text-xs bg-orange-50 text-orange-700 px-2 py-1 rounded-full">优先</span>
              </div>
              <p class="text-sm text-gray-500 mt-1">附件审核后再发送</p>
            </div>
          </div>
          
          <div class="list-item">
            <iconify-icon icon="radix-icons:circle" style="font-size:24px;"></iconify-icon>
            <div class="list-content">
              <div class="flex justify-between">
                <span class="font-medium">健身房锻炼</span>
              </div>
              <p class="text-sm text-gray-500 mt-1">20:00-21:00</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 已完成的任务 -->
      <div class="mt-8">
        <div class="flex items-start mb-3">
          <h2 class="text-lg font-medium flex-1">未来计划</h2>
          <span class="text-sm text-blue-500 font-medium">查看全部</span>
        </div>
        
        <div class="bg-white rounded-xl overflow-hidden border border-gray-100">
          <div class="list-item">
            <iconify-icon icon="radix-icons:circle" style="font-size:24px;color:#aaa"></iconify-icon>
            <div class="list-content">
              <div class="flex justify-between">
                <span class="font-medium text-gray-400">预约牙医检查</span>
              </div>
              <p class="text-sm text-gray-400 mt-1">下周三下午3点</p>
            </div>
          </div>
          
          <div class="list-item">
            <iconify-icon icon="radix-icons:circle" style="font-size:24px;color:#aaa"></iconify-icon>
            <div class="list-content">
              <div class="flex justify-between">
                <span class="font-medium text-gray-400">准备生日礼物</span>
              </div>
              <p class="text-sm text-gray-400 mt-1">下周日前完成</p>
            </div>
          </div>
          
          <div class="list-item">
            <iconify-icon icon="radix-icons:circle" style="font-size:24px;color:#aaa"></iconify-icon>
            <div class="list-content">
              <div class="flex justify-between">
                <span class="font-medium text-gray-400">家人周末聚餐</span>
                <span class="text-xs bg-purple-50 text-purple-700 px-2 py-1 rounded-full">下周日</span>
              </div>
              <p class="text-sm text-gray-400 mt-1">预订餐厅位置</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="fixed-section tab-bar">
      <div class="tab-item">
        <iconify-icon class="tab-icon" icon="mingcute:bill-line"></iconify-icon>
        <span>账单</span>
      </div>
      <div class="tab-item active">
        <iconify-icon class="tab-icon" icon="ion:checkmark-done-outline" style="color:#2563eb"></iconify-icon>
        <span>待办</span>
      </div>
      <div class="tab-item">
        <iconify-icon class="tab-icon" icon="mingcute:calendar-event-line"></iconify-icon>
        <span>纪念日</span>
      </div>
    </div>
  </div>
  
  <!-- 纪念日页面 -->
  <div class="app-container">
    <div class="fixed-section header-bar">
      <h1 style="font-weight:600; font-size:18px">重要纪念日</h1>
      <iconify-icon icon="mi:add" style="font-size:24px;"></iconify-icon>
    </div>
    
    <div class="content-flex">
      <!-- 重要提醒 -->
      <div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-xl p-5 text-white mb-5">
        <div class="flex justify-between">
          <h2 class="font-bold text-lg">结婚纪念日 🎊</h2>
          <div class="bg-white text-indigo-800 text-xs font-bold px-2 py-1 rounded-lg">24天后</div>
        </div>
        <div class="text-sm mt-1">2017年1月12日</div>
        <div class="text-3xl font-bold mt-4">7周年</div>
      </div>
      
      <!-- 近期纪念日 -->
      <div class="mb-5">
        <div class="flex items-start mb-3">
          <h2 class="text-lg font-medium flex-1">即将到来</h2>
          <span class="text-sm text-blue-500 font-medium">查看全部</span>
        </div>
        
        <div class="bg-white rounded-xl overflow-hidden border border-gray-100">
          <div class="list-item">
            <div style="width:48px;height:48px;border-radius:12px;background-color:#fdf2f8;display:flex;align-items:center;justify-content:center;">
              <iconify-icon icon="ph:birthday-cake-bold" style="font-size:24px;color:#ec4899"></iconify-icon>
            </div>
            <div class="list-content">
              <div class="flex justify-between">
                <span class="font-medium">母亲生日</span>
                <span class="text-gray-500">1天后</span>
              </div>
              <div class="text-sm text-gray-500 mt-1">12月20日 · 48岁</div>
            </div>
          </div>
          
          <div class="list-item">
            <div style="width:48px;height:48px;border-radius:12px;background-color:#fff9db;display:flex;align-items:center;justify-content:center;">
              <iconify-icon icon="mdi:gift" style="font-size:24px;color:#f59f00"></iconify-icon>
            </div>
            <div class="list-content">
              <div class="flex justify-between">
                <span class="font-medium">新年</span>
                <span class="text-gray-500">12天后</span>
              </div>
              <div class="text-sm text-gray-500 mt-1">2024年1月1日</div>
            </div>
          </div>
          
          <div class="list-item">
            <div style="width:48px;height:48px;border-radius:12px;background-color:#e6f4ff;display:flex;align-items:center;justify-content:center;">
              <iconify-icon icon="fluent:building-bank-20-regular" style="font-size:24px;color:#1677ff"></iconify-icon>
            </div>
            <div class="list-content">
              <div class="flex justify-between">
                <span class="font-medium">首次购房纪念日</span>
                <span class="text-gray-500">45天后</span>
              </div>
              <div class="text-sm text-gray-500 mt-1">2月1日 · 3周年</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 过往纪念日 -->
      <div>
        <div class="flex items-start mb-3">
          <h2 class="text-lg font-medium flex-1">往年今日</h2>
          <span class="text-sm text-blue-500 font-medium">查看全部</span>
        </div>
        
        <div class="bg-white rounded-xl overflow-hidden border border-gray-100">
          <div class="list-item">
            <div style="width:48px;height:48px;border-radius:12px;background-color:#f0f7ff;display:flex;align-items:center;justify-content:center;">
              <iconify-icon icon="ph:suitcase-simple-bold" style="font-size:24px;color:#1e40af"></iconify-icon>
            </div>
            <div class="list-content">
              <div class="flex justify-between">
                <span class="font-medium">入职周年</span>
                <span class="text-gray-500">已过10天</span>
              </div>
              <div class="text-sm text-gray-500 mt-1">5年工作纪念</div>
            </div>
          </div>
          
          <div class="list-item">
            <div style="width:48px;height:48px;border-radius:12px;background-color:#f0fdf4;display:flex;align-items:center;justify-content:center;">
              <iconify-icon icon="mdi:graduation-cap" style="font-size:24px;color:#15803d"></iconify-icon>
            </div>
            <div class="list-content">
              <div class="flex justify-between">
                <span class="font-medium">大学毕业</span>
                <span class="text-gray-500">已过6个月</span>
              </div>
              <div class="text-sm text-gray-500 mt-1">2023年6月18日</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="fixed-section tab-bar">
      <div class="tab-item">
        <iconify-icon class="tab-icon" icon="mingcute:bill-line"></iconify-icon>
        <span>账单</span>
      </div>
      <div class="tab-item">
        <iconify-icon class="tab-icon" icon="ion:checkmark-done-outline"></iconify-icon>
        <span>待办</span>
      </div>
      <div class="tab-item active">
        <iconify-icon class="tab-icon" icon="mingcute:calendar-event-fill" style="color:#2563eb"></iconify-icon>
        <span>纪念日</span>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 消费图表
    const chart1 = echarts.init(document.getElementById('chart1'));
    chart1.setOption({
      tooltip: { trigger: 'item' },
      legend: {
        bottom: 3,
        left: 'center',
        textStyle: { fontSize: 11 }
      },
      color: ['#fb7185','#a855f7','#f59e0b','#3b82f6','#38bdf8','#22c55e','#f97316'],
      series: [{
        name: '消费类别',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '40%'],
        avoidLabelOverlap: true,
        itemStyle: { borderColor: '#fff', borderWidth: 2 },
        label: { show: false },
        labelLine: { show: false },
        data: [
          { value: 1260, name: '餐饮美食' },
          { value: 850, name: '购物消费' },
          { value: 560, name: '生活缴费' },
          { value: 420, name: '交通出行' },
          { value: 380, name: '休闲娱乐' },
          { value: 276, name: '学习培训' },
          { value: 100, name: '医疗健康' }
        ]
      }]
    });
  });
</script>

</body></html>